<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}UI自动化测试平台{% endblock %}</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
</head>
<style>
    /* 浮层提示样式 */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }
    
    .toast {
        background-color: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.375rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s, transform 0.3s;
    }
    
    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }
    
    .toast.success {
        border-left: 4px solid #28a745;
    }
    
    .toast.error {
        border-left: 4px solid #dc3545;
    }
    
    .toast .toast-header {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .toast .toast-body {
        padding: 0.75rem;
    }
</style>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="bi bi-robot"></i> UI自动化测试平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">
                            <i class="bi bi-house"></i> 首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('testcases') }}">
                            <i class="bi bi-card-list"></i> 测试用例
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('testsuites') }}">
                            <i class="bi bi-collection"></i> 测试套件
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('testresults') }}">
                            <i class="bi bi-bar-chart"></i> 测试结果
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="browserDropdown" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                            <i class="bi bi-browser-edge"></i> 浏览器: <span id="selectedBrowser">Edge</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-browser="edge">Edge</a></li>
                            <li><a class="dropdown-item" href="#" data-browser="chrome">Chrome</a></li>
                            <li><a class="dropdown-item" href="#" data-browser="firefox">Firefox</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        {% block content %}
            <h2>测试用例管理</h2>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">序号</th>
                            <th scope="col">名称</th>
                            <th scope="col">URL</th>
                            <th scope="col">创建时间</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>O2O_进入登录页面</td>
                            <td>https://dciit.cn:8013/web/index.html#/</td>
                            <td>2025/7/31 06:50:58</td>
                            <td>
                                <button type="button" class="btn btn-primary"><i class="bi bi-pencil"></i></button>
                                <button type="button" class="btn btn-success"><i class="bi bi-play"></i></button>
                                <button type="button" class="btn btn-danger"><i class="bi bi-trash"></i></button>
                                <button type="button" class="btn btn-info"><i class="bi bi-copy"></i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>test004</td>
                            <td></td>
                            <td>2025/7/31 15:21:53</td>
                            <td>
                                <button type="button" class="btn btn-primary"><i class="bi bi-pencil"></i></button>
                                <button type="button" class="btn btn-success"><i class="bi bi-play"></i></button>
                                <button type="button" class="btn btn-danger"><i class="bi bi-trash"></i></button>
                                <button type="button" class="btn btn-info"><i class="bi bi-copy"></i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>2</td>
                            <td></td>
                            <td>2025/7/31 15:35:41</td>
                            <td>
                                <button type="button" class="btn btn-primary"><i class="bi bi-pencil"></i></button>
                                <button type="button" class="btn btn-success"><i class="bi bi-play"></i></button>
                                <button type="button" class="btn btn-danger"><i class="bi bi-trash"></i></button>
                                <button type="button" class="btn btn-info"><i class="bi bi-copy"></i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>测试步骤显示测试</td>
                            <td>https://www.baidu.com</td>
                            <td>2025/7/31 15:46:57</td>
                            <td>
                                <button type="button" class="btn btn-primary"><i class="bi bi-pencil"></i></button>
                                <button type="button" class="btn btn-success"><i class="bi bi-play"></i></button>
                                <button type="button" class="btn btn-danger"><i class="bi bi-trash"></i></button>
                                <button type="button" class="btn btn-info"><i class="bi bi-copy"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        {% endblock %}
    </div>
    
    <!-- 浮层提示容器 -->
    <div id="toastContainer" class="toast-container"></div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
    <script>
        // 浏览器选择功能
        function initBrowserSelector() {
            // 从localStorage获取保存的浏览器选择
            let selectedBrowser = localStorage.getItem('selectedBrowser') || 'edge';
            updateBrowserDisplay(selectedBrowser);
            
            // 处理浏览器选择
            document.querySelectorAll('.dropdown-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    let browser = this.getAttribute('data-browser');
                    localStorage.setItem('selectedBrowser', browser);
                    updateBrowserDisplay(browser);
                });
            });
            
            // 更新浏览器显示
            function updateBrowserDisplay(browser) {
                document.getElementById('selectedBrowser').textContent = browser.charAt(0).toUpperCase() + browser.slice(1);
                // 更新图标
                let iconClass = 'bi-browser-' + browser;
                if (browser === 'edge') {
                    iconClass = 'bi-browser-edge';
                } else if (browser === 'chrome') {
                    iconClass = 'bi-chrome';
                } else if (browser === 'firefox') {
                    iconClass = 'bi-firefox';
                }
                document.querySelector('#browserDropdown i').className = 'bi ' + iconClass;
            }
        }
        
        // 导航条选中状态功能
        function initNavigationActiveState() {
            // 获取当前页面的URL路径
            const currentPath = window.location.pathname;
            
            // 获取所有导航链接
            const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
            
            // 遍历所有导航链接，为匹配当前路径的链接添加active类
            navLinks.forEach(link => {
                // 获取链接的href属性
                const linkPath = new URL(link.href).pathname;
                
                // 如果链接路径与当前路径匹配，则添加active类
                if (linkPath === currentPath) {
                    link.classList.add('active');
                    // 同时为其父元素li添加active类，以确保Bootstrap样式正确应用
                    link.parentElement.classList.add('active');
                }
            });
        }
        
        // 显示浮层提示
        function showToast(message, type = 'success') {
            const toastContainer = document.getElementById('toastContainer');
            
            // 创建浮层元素
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.innerHTML = `
                <div class="toast-header">
                    <strong class="me-auto">
                        ${type === 'success' ? '<i class="bi bi-check-circle-fill text-success"></i> 成功' : 
                          '<i class="bi bi-exclamation-circle-fill text-danger"></i> 错误'}
                    </strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    ${message}
                </div>
            `;
            
            // 添加到容器
            toastContainer.appendChild(toast);
            
            // 显示浮层
            setTimeout(() => {
                toast.classList.add('show');
            }, 100);
            
            // 2秒后自动隐藏
            setTimeout(() => {
                toast.classList.remove('show');
                // 动画结束后移除元素
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.parentNode.removeChild(toast);
                    }
                }, 300);
            }, 2000);
        }
        
        // 确保在jQuery加载后初始化浏览器选择功能
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                initBrowserSelector();
                initNavigationActiveState();
            });
        } else {
            // DOM已经加载完成
            initBrowserSelector();
            initNavigationActiveState();
        }
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>